<script lang="ts" setup>

import { ref, computed } from "vue";
import { goManage,goRoleDe } from "../../tools/go"
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import BHeader from "../../components/header/bHeader.vue";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import {toast} from "../../components/popup/popup";
import UniPopupDialog from "../../uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue";
import {getManageRoleList} from "../../api/role/role";


interface RoleItem {
  id: number;
  name: string;
  description: string;
}

const searchKey = ref("");
const deletePopup = ref();
const currentRole = ref<RoleItem | null>(null);

const filteredRoleList = computed(() => {
  if (!searchKey.value) return RoleList.value;
  return RoleList.value.filter((item) =>
      item.name.toLowerCase().includes(searchKey.value.toLowerCase()),
  );
});

const handleSearch = () => {
  // 搜索处理
};

const handleAdd = () => {
  toast("点击了添加按钮", "none")
  goRoleDe()
};

const handleViewDetail = (role: RoleItem) => {
  toast(`查看角色：${role.name}`, "none")
};

const handleEdit = (role: RoleItem) => {
  toast(`编辑角色：${role.name}`, "none")
};

const handleDelete = (role: RoleItem) => {
  currentRole.value = role;
  deletePopup.value.open();
};

const confirmDelete = () => {
  if (currentRole.value) {
    roleList.value = roleList.value.filter(
        (item) => item.id !== currentRole.value?.id,
    );
    toast("删除成功", "success")
  }
  deletePopup.value.close();
};

const closeDeleteDialog = () => {
  currentRole.value = null;
  deletePopup.value.close();
};

const goBack = () => {
  goManage()
}

const rolePage = {
  page:1,
  size:10,
}

const RoleList = ref([])

const init = () => {
  getManageRoleList(rolePage.page, rolePage.size).then(res => {
    RoleList.value = res.data.records
  })
}

init()
</script>

<template>
  <view class="back">
    <view class="container">
      <!-- 顶部导航 -->
      <b-header title="角色管理" :go="goBack">
        <view class="add-btn" @click="handleAdd">
          <uni-icons type="plusempty" size="24" color="#868e96"></uni-icons>
        </view>
      </b-header>

      <!-- 搜索区域 -->
      <view class="search-box">
        <uni-icons type="search" size="20" color="#999"></uni-icons>
        <input
            type="text"
            v-model="searchKey"
            placeholder="搜索角色名称"
            placeholder-class="placeholder"
            @input="handleSearch"
        />
      </view>

      <!-- 角色列表 -->
      <scroll-view class="role-list" scroll-y v-if="RoleList.length > 0">
        <view
            class="role-item"
            v-for="item in filteredRoleList"
            :key="item.id"
            @click="handleViewDetail(item)"
        >
          <view class="role-info">
            <view class="role-name">{{ item.name }}</view>
            <view class="role-desc">{{ item["roleDescription"] }}</view>
          </view>
          <view class="role-actions">
            <view class="action-btn edit" @click.stop="handleEdit(item)">
              <uni-icons type="compose" size="20" color="#666"></uni-icons>
            </view>
            <view class="action-btn delete" @click.stop="handleDelete(item)">
              <uni-icons type="trash" size="20" color="#666"></uni-icons>
            </view>
          </view>
        </view>
      </scroll-view>

      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <uni-icons type="info" size="64" color="#999"></uni-icons>
        <text class="empty-text">暂无角色数据</text>
      </view>

      <!-- 删除确认弹窗 -->
      <uni-popup ref="deletePopup" type="dialog">
        <uni-popup-dialog
            type="warning"
            title="删除确认"
            content="确定要删除该角色吗？"
            :before-close="true"
            @confirm="confirmDelete"
            @close="closeDeleteDialog"
        ></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>



<style scoped lang="scss">
@use "../../static/css/main";
.back {
  @include main.useTheme(){
    .container {
      .role-list {
        .role-item {
          .role-info {
            .role-name {
              font-size: 16px;
              color: main.getVal("one_lv_text_color");
              font-weight: 500;
              margin-bottom: 8rpx;
            }

            .role-desc {
              font-size: 14px;
              color: #999999;
              line-height: 1.4;
            }
            flex: 1;
            margin-right: 20rpx;
          }
          .role-actions {
            .action-btn {
              width: 40px;
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 20rpx;
            }
            display: flex;
            align-items: center;
          }
          background-color: main.getVal("primary_bg_color");
          border-radius: 12rpx;
          padding: 30rpx;
          margin-bottom: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        flex: 1;
        overflow: auto;
        padding: 0 30rpx;
      }

      .empty-state {
        .empty-text {
          margin-top: 20rpx;
          font-size: 14px;
          color: #999999;
        }
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .search-box {
        .search-box input {
          .placeholder {
            color: #999999;
          }
          flex: 1;
          height: 72rpx;
          margin-left: 20rpx;
          font-size: 14px;
        }

        margin: 20rpx 30rpx;
        height: 72rpx;
        background-color: main.getVal("primary_bg_color");
        border-radius: 36rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        flex-shrink: 0;
      }
      min-height: 100vh;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: main.getVal("two_lv_bg_color");
    }
  }
}
</style>
